<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="js/echarts.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            list-style: none;
        }

        .header {
            width: 100%;
            height: 68px;
            padding-left: 250px;
            padding-top: 13px;
            padding-right: 20px;
            box-shadow: 2px 2px 10px 2px rgb(0 0 0 / 50%);
            position: fixed;
            left: 0;
            top: 0;
            z-index: 1000;
            background-color: white;
        }

        .header .left {
            float: left;
        }

        .header .center {
            float: right;
            width: 276px;
            height: 35px;
            background-color: #EEF1F5;
            border-radius: 30px;
            margin-right: 100px;
            display: block;
        }

        .header .center input {
            width: 100%;
            height: 35px;
            float: left;
            border: 0;
            border-radius: 30px;
            background-color: #EEF1F5;
            outline: none;
            padding: 0 10px;
            position: relative;
            top: 0;
            left: 0;
        }

        .header .right {
            float: right;
        }

        .header .left img {
            width: 30px;
            height: 30px;
            cursor: pointer;
        }

        .header .right img {
            width: 30px;
            height: 30px;
        }

        .slider {
            width: 220px;
            height: 100%;
            position: fixed;
            left: 0;
            top: 0;
            background-color: white;
            box-shadow: 2px 2px 10px 2px rgb(0 0 0 / 50%);
            transition: transform 0.4s;
            z-index: 1100;
        }

        .slider .title {
            color: white;
            text-align: center;
            padding: 15px 0;
            background-color: #438AFE;
        }

        .slider .title h2 {
            font-size: 26px;
            font-weight: 400;
        }

        .slider .image {
            width: 220px;
            height: 130px;
        }

        .slider .image img {
            width: 220px;
            height: 130px;
        }

        .slider .menu {
            width: 100%;
            height: 420px;
            color: #000;
            font-size: 20px;
            padding-left: 20px;
            padding-top: 20px;
        }

        .slider .menu ul li {
            height: 50px;
            padding: 5px 0;
        }

        .slider .menu ul li span {
            margin-left: 5px;
            position: relative;
            top: 3px;
            cursor: pointer;
        }

        .slider .menu ul li img {
            width: 30px;
            height: 30px;
            line-height: 45px;
        }

        .main {


            padding-left: 240px;
            padding-top: 88px;
            z-index: 900;
            padding-right: 15px;
            padding-bottom: 15px;
        }

        @media screen and (max-width:1024px) {
            .slider {
                transform: translate(-220px);
            }

            .header {
                padding-left: 15px;
            }

            .main {
                padding-left: 15px;
            }
        }

        @media screen and (max-width:506px) {
            .header .center {
                display: none;
            }
        }

        body {
            background: #f7f7f7;
            overflow-x: hidden;
        }

        .haha .item {
            height: 107px;
            color: #fff;
            padding: 20px;
            margin-bottom: 20px;
        }

        .haha .test1 {
            background-color: #fdc35f;
        }

        .haha .test2 {
            background-color: #f96868;
        }

        .haha .test3 {
            background-color: #7cb7fe;
        }

        .haha .test4 {
            background-color: #a99bfd;
        }

        .hehe .card {
            height: 664px;
            margin-bottom: 20px;
        }


        .trade {
            height: 450px;
            background: #fff;
        }

        .trade .title {
            padding: 20px 30px;
            box-sizing: border-box;
        }

        .trade .title span {
            font-size: 20px;
        }



        .trade .type b {
            margin: 0 10px;
        }

        .study {
            height: 244px;
            background: #fff;
            margin-top: 20px;
        }

        .money {
            height: 300px;
            background: #fff;
        }

        .class {
            height: 370px;
            background: #fff;
            margin-top: 20px;
        }

        .chart1 .title {
            padding: 20px 30px;
            box-sizing: border-box;
        }

        .chart1 .title span {
            font-size: 20px;
        }

        .chart1 .title .type {
            height: 30px;
            padding: 0 20px;
            border-radius: 20px;
            background: #EEF1F5;
            float: right;
            text-align: center;
            line-height: 30px;
        }

        .chart1 .type b {
            margin: 0 10px;
        }

        #table1 {
            width: 100% !important;
            margin-top: -60px;
        }

        #table3 {
            width: 100% !important;
            margin-top: -100px;
        }
    </style>

</head>

<body>

    <div class="header">
        <div class="left">
            <img src="images/menu.png" alt="">
        </div>
        <div class="right">
            <img src="images/icon.png" alt="">
            <img src="images/close.png" alt="">
        </div>
        <div class="center">
            <input type="text" placeholder="搜索">
        </div>
    </div>
    <div class="slider">
        <div class="title">
            <h2>凤凰教育</h2>
        </div>
        <div class="image">
            <img src="images/avatar.png" alt="">
        </div>
        <div class="menu">
            <ul>
                <li>
                    <img src="images/icon1.png" alt="">
                    <span>数据中心</span>
                </li>
                <li>
                    <img src="images/icon2.png" alt="">
                    <span>学员管理</span>
                </li>
                <li>
                    <img src="images/icon3.png" alt="">
                    <span>教师管理</span>
                </li>
                <li>
                    <img src="images/icon4.png" alt="">
                    <span>课程管理</span>
                </li>
                <li>
                    <img src="images/icon5.png" alt="">
                    <span>订单管理</span>
                </li>
                <li>
                    <img src="images/icon6.png" alt="">
                    <span>财务管理</span>
                </li>
                <li>
                    <img src="images/icon7.png" alt="">
                    <span>客服管理</span>
                </li>
                <li>
                    <img src="images/icon8.png" alt="">
                    <span>系统设置</span>
                </li>
            </ul>
        </div>
    </div>
    <div class="main">
        <div class="record">
            <div class="row haha">
                <div class="col-lg-3 col-md-6 col-xs-12">
                    <div class="item test1">
                        <P>学生人数</P>
                        <h3>102,1</h3>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6 col-xs-12">
                    <div class="item test2">
                        <p>教师人数</p>
                        <h3>902</h3>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6 col-xs-12">
                    <div class="item test3">
                        <P>销售数量</P>

                        <h3>102,125.00</h3>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6 col-xs-12">
                    <div class="item test4">
                        <P>视频数量</P>

                        <h3>302,365.00</h3>
                    </div>
                </div>
            </div>
        </div>
        <div class="row hehe">
            <div class="col-lg-8 col-xs-12">
                <div class="card chart1">

                    <div class="trade">
                        <div class="title">
                            <span>成交量</span>
                            <span>访问量</span>
                            <div class="type">
                                <b>今日状况</b>
                                <b>最近15天</b>
                                <b>最近30天</b>
                            </div>
                        </div>
                        <div id="table1" style="width: 100%;height:400px;"></div>

                    </div>


                    <div class="study">
                        <div class="title">
                            <span>各阶段分数报班人数</span>
                            <div class="type">
                                <b>2021-11-1</b>
                            </div>
                        </div>
                        <div id="table2" style="height:200px; "></div>

                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-xs-12">
                <div class="card chart1">
                    <div class="money" style="padding-left: 10px;">
                        <div class="title">
                            <span>实付金额</span>
                            <div class="type">
                                <b>2021-11-1</b>
                            </div>
                        </div>
                        <div id="table3" style="height:280px; "></div>
                    </div>

                    <div class="class">
                        <div class="title">
                            <span>测试数</span>
                            <span>报班数</span>
                            <div class="type">
                                <b>2021-11-1</b>
                            </div>
                        </div>
                        <div id="table4" style="width:100%;height:260px;margin-top:50px"></div>

                    </div>
                </div>
            </div>
        </div>
    </div>


</body>
<script>
    var myChart1 = echarts.init(document.getElementById('table1'));
    let option1 = {
        xAxis: {
            type: 'category',
            data: ['2020-1-19', '2020-1-20', '2020-1-21', '2020-1-22', '2020-1-23', '2020-1-24', '2020-1-25']
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            itemStyle: {
                normal: {
                    color: '#FFCC00',
                    lineStyle: {
                        color: '#FFC254'
                    }
                }
            },
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line',
            smooth: true
        }, {
            itemStyle: {
                normal: {
                    color: '#00CCFF',
                    lineStyle: {
                        color: '#00CCFF'
                    }
                }
            },
            data: [120, 632, 401, 734, 1090, 930, 720],
            type: 'line',
            smooth: true
        }]
    };

    myChart1.setOption(option1);

    var myChart2 = echarts.init(document.getElementById('table2'));
    let option2 = {
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
            orient: 'vertical',
            left: 10,
            data: ['0-40分', '40-60分', '60-80分', '80-100分', '无分数']
        },
        series: [{
            name: '分数段占比',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
                show: false,
                position: 'center'
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: '30',
                    fontWeight: 'bold'
                }
            },
            labelLine: {
                show: false
            },
            data: [{
                value: 335,
                name: '0-40分'
            }, {
                value: 310,
                name: '40-60分'
            }, {
                value: 234,
                name: '60-80分'
            }, {
                value: 135,
                name: '80-100分'
            }, {
                value: 1548,
                name: '无分数'
            }]
        }]
    };

    myChart2.setOption(option2);

    var myChart3 = echarts.init(document.getElementById('table3'));
    var option3 = {
        tooltip: {},
        xAxis: {
            data: ["06:00", "08:00", "10:00", "12:00", "16:00", "22:00", "24:00"]
        },
        yAxis: {},
        series: [{
            name: '付款金额',
            itemStyle: {
                normal: {
                    color: '#9F5F9F',
                }
            },
            type: 'bar',
            data: [200, 600, 800, 620, 400, 1000, 800]
        }]
    };
    myChart3.setOption(option3);

    var myChart4 = echarts.init(document.getElementById('table4'));
    var option4 = {

        tooltip: {},

        radar: {

            indicator: [
                { name: 'java', max: 100 },
                { name: '数据库', max: 100 },
                { name: '前端', max: 100 },
                { name: '数据结构', max: 100 },
                { name: '小程序', max: 100 },

            ]
        },
        series: [{
            name: '预算 vs 开销',
            type: 'radar',
            // areaStyle: {normal: {}},
            data: [
                {
                    value: [50, 70, 88, 95, 50, 19],
                    name: '无敌是'
                },
                {
                    value: [50, 84, 58, 71, 42, 81],
                    name: '多么寂寞'
                }
            ]
        }],
        color: ['#fa610e', '#00aaee']
    };
    myChart4.setOption(option4);
</script>

</html>